<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style >
    #fu{
      width: 500px;
      height: 500px;
      background: darkgreen;
    }
    #zi{
      width: 300px;
      height: 300px;
      background: blue;
    }
    #fuBox{
      width: 500px;
      height: 500px;
      background: darkgreen;
    }
    #ziBox{
      width: 300px;
      height: 300px;
      background: blue;
    }
</style>
<body >
  <div id="app">
    <div id="fu" @click="fuClick">
      <!-- 1) .stop 阻止事件冒泡的修饰符 -->
      <div id="zi" @click.stop="ziClick">
        子元素
      </div>
    
    </div>
    <!-- 2.   .prevent  阻止默认行为 修饰符 如表单提交事件 -->
    <form action="#" @submit.prevent="formSub">
        输入年龄：<input type="text">
        <input type="submit" value="提交">
    </form>
    <!-- 3. once  事件只触发一次的修饰 -->
     <h1  @click.once="oneClick">点击触发一次</h1>
    <!-- 4. self 事件只在元素本身触发  子元素不触发  -->
     <div id="fuBox" @click.self="selfClick">
      <div id="ziBox">子元素不触发</div>
     </div>
    <!-- 5. capture 将事件调整为捕获模式  -->
     <div @click="capClick">
       捕获模式 --由外向内触发 不会冒泡
     </div>
     <!-- 6.passive: 移动端用到的,防止监听元素滚动事件时网页卡顿 防止热更新，提高性能 -->
      <div  style="height: 400px;width: 500px; overflow-x: hidden;
      overflow-y: scroll; "
        @scroll.passive="scrollFn($event)">
              <div style="height: 3000px;
                  width: 500px;background: salmon;">子元素</div>
    </div>
    <!-- 7 .native:  给组件 绑定事件 将组件类似于转换为原生标签 -->
  
      <!-- Native app 原生app 用安卓 ios 鸿蒙开发的app -->
       <!--Hybird App   混合app 安卓 ios等嵌入web app内容 -->
       <!-- Web App  纯 web前端开发的app  -->

      <!-- <swiperCom @click.native="natClick">你好</swiperCom> -->
   
  </div>
   <script src="./vue.js"></script>
   <script>
     new Vue({
      el:"#app",
      data(){
        return {}
      },
      methods:{
        fuClick(){
           alert("父元素触发")
        },
        ziClick(){
          
          alert("儿子触发")
        },
        oneClick(){ //只触发一次
          alert("点击触发一次")
        },
        selfClick(){ //只有元素本身触发 子元素触发
            alert("自身触发了")
        },
        capClick(){
          alert("捕获模式")
        },
        scrollFn(e){ //.passive 提高滚动事件性能
            console.log(e.target.scrollTop,"-----------")
        },
        natClick(){ 
          alert("用.native 将组件绑定原生事件")
        }
      }
     })
    
   </script>
</body>
</html>